<template>
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="`上交合同详情`" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">
        <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <!-- 表单盒子 -->
            <view class="form_box area">
                <scroll-view scroll-y class="comprehensive" v-if="list" :style="level == userInfo.id  ? 'height:73vh' : 'height:82vh'">
                    <view class="recruit_wrap">
                        <view class="header">
                            <up-avatar :src="`${baseUrl}` + list.user.avatar" shape="circle" size="60"></up-avatar>
                            <view class="header_cont">
                                <view class="title">{{ list.user.nickname }}上交的合同</view>
                                <view class="times">{{ formatDate(list.createtime) }}<text class="hint">提交</text></view>
                            </view>
                        </view>
                        <view class="detial_list">
                            <view class="item">
                                <view class="titles">合同名称：</view>
                                <view class="list_right">{{ list.title }}</view>
                            </view>
                            <view class="item">
                                <view class="titles">甲方名称：</view>
                                <view class="list_right">{{ list.first_party }}</view>
                            </view>
                            <view class="item">
                                <view class="titles">已方名称：</view>
                                <view class="list_right">{{ list.second_party }}</view>
                            </view>
                            <view class="item">
                                <view class="titles">起止日期：</view>
                                <view class="list_right">{{ list.start_date }} - {{ list.end_date }}</view>
                            </view>
                            <view class="item item_special" v-if="list.images">
                                <view class="titles">封面：</view>
                                <view class="item_special_img">
                                    <up-album :urls="images" class="images"></up-album>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </s-layout>
       <!-- //拒绝弹窗 -->
        <s-reasons-comfirm :show="showRefuse" @cancel="reasonsCancel" @affirm="reasonsConfirm"></s-reasons-comfirm>
    <!-- 底部提交按钮 -->
    <view v-if="level == userInfo.id">
        <view class="edit_button"  v-if="list.state == 0 || list.state == 3">
            <button class="del" @tap="refuse(list.id)">拒绝</button>
            <button class="edit" @tap="submit(list.id)">同意</button>
        </view>
    </view>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive, unref } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    import { formatDate } from '@/utils/fn.js';
    const { safeAreaInsets } = uni.getSystemInfoSync();
    const userInfo = sheep.$store('user').userInfo;
    const editid = ref('')
    const level =  ref()
    onLoad((options) => {
        editid.value = options.ids
        getPolicyreportView()
    })
    //请求数据
    const list = ref()
    const images_array = ref()
    const images = ref([])
    const getPolicyreportView = async () => {
        let params = {
            ids: editid.value,
        }
        const res = await sheep.$api.turn_in_contract.contract_submitView(params)
        list.value = res?.data
        images_array.value = list.value.images.split(',')
        images_array.value.forEach(item => {
            images.value.push(`${baseUrl}${item}`)
        })
    }
</script>

<style scoped lang="scss">
    @import '../compentns/public.scss';
    .recruit_wrap {
        .header {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #EFEFEF;
        padding-bottom: 30rpx;
        margin-bottom: 20rpx;
    
            image {
                width: 104rpx;
                height: 104rpx;
                border-radius: 50%;
            }
        
            .header_cont {
                display: flex;
                flex-direction: column;
                margin-left: 20rpx;
            }
        
            .title {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: 30rpx;
                margin-bottom: 10rpx;
            }
        
            .times {
                font-family: PingFangSC;
                color: #999999;
                font-weight: 500;
                font-size: $uni-font-size-sm;
            }
        }
    
        .detial_list {
            width: 100%;
            margin-bottom: 30rpx;

            .particulars {
                .particulars_title {
                    height: 90rpx;
                    line-height: 90rpx;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: 34rpx;
                    position: relative;
                    margin-bottom: 20rpx;

                    &::after {
                        width: 92rpx;
                        height: 14rpx;
                        content: '';
                        position: absolute;
                        bottom: 23%;
                        z-index: 9;
                        left: 3%;
                        border-radius: 10rpx;
                        background-color: rgba(0, 56, 247, 0.5);
                    }
                }
            }

            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 90rpx;

                .titles {
                    font-family: PingFangSC;
                    color: #666666;
                    font-weight: 500;
                    font-size:$uni-font-size-26;
                }

                .list_right {
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: 500;
                    font-size:$uni-font-size-26;
                    text-align: right;
                }
            }

            .item_special {
                height: auto;
                flex-direction: column;
                align-items: flex-start;

                .titles {
                    font-family: PingFangSC;
                    color: #666666;
                    font-weight: 500;
                    font-size:$uni-font-size-26;
                    height: 90rpx;
                    line-height: 90rpx;
                }

                .item_special_cont {
                    width: calc(100% - 40rpx);
                    background: #F9FAFF;
                    border-radius: 16rpx;
                    color: $uni-text-color;
                    font-weight: 500;
                    font-size:$uni-font-size-26;
                    padding: 20rpx;
                }
            }
        }
    }

    .item_bumen_special {
        display: flex;
    }

    .bumen {
        width: 100%;
        font-family: PingFangSC;
        color: #666666;
        font-weight: 500;
        font-size:$uni-font-size-26;
        height: 90rpx;
        line-height: 90rpx;
    }

    .lsit_right_special {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 500;
        font-size:$uni-font-size-26;
        text-align: right;
    }

    //审核流程
    .auditProcess {
        border-top: 1rpx solid #EFEFEF;

        .title {
            height: 90rpx;
            line-height: 90rpx;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 34rpx;
            position: relative;
            margin-bottom: 20rpx;

            &::after {
                width: 92rpx;
                height: 14rpx;
                content: '';
                position: absolute;
                bottom: 23%;
                z-index: 9;
                left: 3%;
                border-radius: 10rpx;
                background-color: rgba(0, 56, 247, 0.5);
            }
        }

        .status {
            display: flex;
            justify-content: space-between;
            min-height: 140rpx;
            padding-left: 20rpx;

            .status_left {
                width: 70%;
                margin-left: 20rpx;

                .name {
                    color: $uni-text-color;
                    font-weight: 500;
                    font-size:$uni-font-size-26;

                    .position {
                        color: #999999;
                        font-weight: 500;
                        font-size: 22rpx;
                        margin-left: 10rpx;
                    }
                }

                .date {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: 500;
                    font-size: $uni-font-size-sm;
                    margin-top: 10rpx;
                }
            }

        .status_right {
            .taster {
                border: none;
                width: 104rpx;
                height: 40rpx;
                font-family: PingFangSC;
                font-weight: 500;
                font-size: 22rpx;
                border-radius: 18rpx;
                line-height: 40rpx;
                padding: 0;

                &::after {
                    border: none;
                }
            }

            .yellow {
                color: #F77704;
                background: #FEF3E6;
            }

            .green {
                color: #17A500;
                background: #EAFEE6;
            }

            .red {
                color: #FEE6E6;
                background: #FF0000;
            }
        }
        }
    }

    //  修改内容
    .edit_button {
        height: 144rpx;
        width: 90%;
        padding: 0 5%;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 98;
        display: flex;
        align-items: center;

        .del {
            width: 316rpx;
            height: 90rpx;
            border-radius: 50rpx;
            border: 2rpx solid $uni-color-primary;
            color: $uni-color-primary;
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: $uni-font-weight;
            font-size: 34rpx;
        }

        .edit {
            margin-left: 20rpx;
            width: 316rpx;
            height: 90rpx;
            border-radius: 50rpx;
            font-family: PingFangSC;
            color: #FFFFFF;
            font-weight: $uni-font-weight;
            font-size: 34rpx;
            background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
        }
    }

  // 滚动
    .comprehensive {
        background-color: rgba(0, 0, 0, 0);
    }

    .reasonspop {
        :deep(.u-textarea) {
            background-color: #F9FAFF;
            .u-textarea__field {
                height: 446rpx !important;
                padding: 10rpx;
            }
        }

        .reasonsTitle {
            height: 90rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 40rpx;
        }

        .reasonsForRefusal {
            height: 466rpx;
            background: #F9FAFF;
        }

        .btn {
            height: 120rpx;
            background: $uni-bg-color;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .button {
                height: 90rpx;
                width: 240rpx;
                border-radius: 50rpx;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
            }

            .cancel {
                border: 1px solid $uni-color-primary;
                color: $uni-color-primary
            }

            .confirm {
                color: $uni-bg-color;
                background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
            }
        }
    }

    .item_special_img {
        display: flex;
        image {
            width: 118rpx;
            height: 118rpx;
            border-radius: 16rpx;
            background-color: #F4F6FA;
            margin-left: 10rpx;
        }
    }
</style>